<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <input class="i1" type="text" name="username" value="admine" placeholder="输入账号" >
    <script>
        /* 
            属性节点(Attr)
                在DOM中也是一个对象，通常不需要获取对象而是直接通过元素完成对其的各种操作。

                如何操作属性节点？
                （1）
                    读取：
                        元素.属性名
                            注意:
                                1.class属性需要通过className来读取
                                2.读取一个布尔值时，会返回true 或者 false

                    修改：
                        元素.属性名="属性值"

                （2）        
                    读取：
                        元素.getAttribute("属性名")
                    修改：
                        元素.setAttribute("属性名","属性值")
                    
                    移除属性：
                        元素.remove.Attribute("属性名")
                            删除这个属性
        */
    const input=document.querySelectorAll('[name=username]')[0]
//===================用属性============================
    console.log(input.type)
    console.log(input.className)//class属性需要通过className来读取
    console.log(input.disabled)  // 读取一个布尔值时，会返回true或者false

//===================用方法============================
    input.setAttribute("placeholder","请输入您的账号")
    input.setAttribute("value","请把原来的删除")

    console.log(input.getAttribute("placeholder"))
    input.setAttribute("disabled",false)     // disable时用来禁用表单项
    input.removeAttribute("disabled")
    
    document.documentElement.lang="zh"
    </script>
</body>
</html>